<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>ComputerERP主页</title>
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
    <script type="text/javascript" src="/static/js/jquery/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="/static/js/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/echarts/echarts.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!--    上方导航栏-->
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">ComputerERP</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <!--        <ul class="layui-nav layui-layout-left">-->
        <!--            &lt;!&ndash; 移动端显示 &ndash;&gt;-->
        <!--            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">-->
        <!--                <i class="layui-icon layui-icon-spread-left"></i>-->
        <!--            </li>-->

        <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>-->
        <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>-->
        <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>-->
        <!--            <li class="layui-nav-item">-->
        <!--                <a href="javascript:;">nav groups</a>-->
        <!--                <dl class="layui-nav-child">-->
        <!--                    <dd><a href="">menu 11</a></dd>-->
        <!--                    <dd><a href="">menu 22</a></dd>-->
        <!--                    <dd><a href="">menu 33</a></dd>-->
        <!--                </dl>-->
        <!--            </li>-->
        <!--        </ul>-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/main/selfinformation}">个人信息</a></dd>
                    <dd><a href="">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <!--左侧导航栏-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">进货管理</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/main/purchase/pmanagement}">进货入库</a></dd>
                        <dd><a th:href="@{/main/purchase/omanagement}">退货出库</a></dd>
                        <dd><a th:href="@{/main/purchase/pmanagementorder}">进货单查询</a></dd>
                        <dd><a th:href="@{/main/purchase/omanagementorder}">退货单查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item ">
                    <a href="javascript:;">销售管理</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/main/sales/salesdelivery}">销售出库</a></dd>
                        <dd><a th:href="@{/main/sales/omanagement}">客户退货</a></dd>
                        <dd><a th:href="@{/main/sales/salesorder}">销售单查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item ">
                    <a class="" href="javascript:;">库存管理</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/main/warehouse/damage}">商品报损/报溢</a></dd>
                        <dd><a th:href="@{/main/warehouse/alarm}">库存报警</a></dd>
                        <dd><a th:href="@{/main/warehouse/brimordamage}">报损报溢查询</a></dd>
                        <dd><a th:href="@{/main/warehouse/querywarehouse}">当前库存查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">统计报表</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/main/report/business}">供应商统计报表</a></dd>
                        <dd><a th:href="@{/main/report/buyCount}">商品采购统计</a></dd>
                        <dd><a th:href="@{/main/report/saleCount}">商品销售统计</a></dd>
                        <dd><a th:href="@{/main/report/mouthCount}">月销售统计报表</a></dd>
                        <dd><a th:href="@{/main/report/yearCount}">年销售统计报表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item ">
                    <a class="" th:href="@{/main/manage/manage}">系统设置</a>
                </li>
            </ul>
        </div>
    </div>
    <!--主体区域-->
    <!--    <div class="layui-body">-->
    <!--        &lt;!&ndash; 内容主体区域 &ndash;&gt;-->
    <!--&lt;!&ndash;        <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>&ndash;&gt;-->
    <!--    </div>-->
    <div class="layui-tab layui-tab-brief">
        <div class="layui-body layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-main">
                         <div id="LAY_layedit_code" style="">
                                <div class="layui-col-md6">
                                    <div id="MoneyYear" style="width: 850px;height:400px;"></div>
                                </div>
                                <div class="layui-col-md6">
                                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                    <div id="MoneySeason" style="width: 850px;height:400px;"></div>
                                </div>
                            </div>
                        </div>
                        <!--                            <div class="layui-row layui-col-space5">-->
                        <!--                               -->
                        <!--                            </div>-->
            </div>
        </div>
    </div>
</div>

<div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
</div>
</div>

<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });
    });
    $(function () {

    });
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('MoneyYear'),'light');
    var option = {
        backgroundColor:'#ffffff',
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '2%',
            right: '4%',
            bottom: '14%',
            top:'5%',
            containLabel: true
        },
        legend: {
            data: ['订单成交总金额', '实际成交总金额', '成交金额'],
            right: 10,
            top:20,
            textStyle: {
                color: "#000000"
            },
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 20
        },
        xAxis: {
            type: 'category',
            data: ['2015','2016','2017','2018','2019','2020','2021','2022'],
            axisLine: {
                lineStyle: {
                    color: 'red'

                }
            },
            axisLabel: {
                // interval: 0,
                // rotate: 40,
                textStyle: {
                    fontFamily: 'Microsoft YaHei'
                }
            },
        },

        yAxis: {
            grid: {
                left: '10%',
                top: '8%',
            },
            type: 'value',
            max:'120000',
            name: '电脑零件采购报表',
            nameGap: '8',
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'black'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(0,0,0,0.3)'
                }
            },
            axisLabel: {}
        },
        "dataZoom": [{
            "show": true,
            "height": 12,
            "xAxisIndex": [
                0
            ],
            bottom:'8%',
            "start": 40,
            "end": 80,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '50%',
            handleStyle:{
                color:"#d3dee5",

            },
            textStyle:{
                color:"#000000"},
            borderColor:"#90979c"
        }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
        }],
        series: [{
            name: '订单成交总金额',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#fccb05'
                    }, {
                        offset: 1,
                        color: '#f5804d'
                    }]),
                    barBorderRadius: 12,
                },
            },
            data: [4000, 40000, 30000, 30000, 30000, 40000, 40000, 40000, 30000]
        },
            {
                name: '实际成交总金额',
                type: 'bar',
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#8bd46e'
                        }, {
                            offset: 1,
                            color: '#09bcb7'
                        }]),
                        barBorderRadius: 11,
                    }

                },
                data: [40000, 50000, 50000, 50000, 50000, 40000,40000, 50000, 50000]
            },
            {
                name: '成交金额',
                type: 'bar',
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#248ff7'
                        }, {
                            offset: 1,
                            color: '#6851f1'
                        }]),
                        barBorderRadius: 11,
                    }
                },
                data: [40000, 60000, 70000, 70000, 100000, 40000, 40000, 60000, 70000]
            }]
    };

    var app = {
        currentIndex: -1,
    };
    setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        //console.log(app.currentIndex);
        // 高亮当前图形
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });


    }, 1000);

    myChart.setOption(option);
</script>
<script>
    var myChart = echarts.init(document.getElementById('MoneySeason'),'light');
    const labelOption = {
        show: true,
        position: "insideBottom",
        distance:19,
        align: 'left',
        verticalAlign: 'middle',
        rotate: 90,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {}
        }
    };
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['零件使用量', '销量', '库存量']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: ['第一季度', '第二季度', '第三季度', '第四季度', '年底最后一个月']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '零件使用量',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [320, 332, 301, 334, 390]
            },
            {
                name: '销量',
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290]
            },
            {
                name: '库存量',
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190]
            },
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>